<template>
  <el-row>
    <el-col>
      <el-menu
        default-active="2"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

        <el-menu-item index="1">
          <i class="el-icon-s-grid"></i>
          <span slot="title">主页</span>
        </el-menu-item>

        <el-menu-item index="2">
          <i class="el-icon-user"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-collection"></i>
            <span>学习生涯</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">成绩查询</el-menu-item>
            <el-menu-item index="3-2">课程表查询</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-bank-card"></i>
            <span>一卡通服务</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">一卡通查询</el-menu-item>
            <el-menu-item index="4-2">一卡通充值</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>宿舍后勤</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">查询宿舍号</el-menu-item>
            <el-menu-item index="5-2">来访者信息登记</el-menu-item>
            <el-menu-item index="5-3">入住反馈</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="6">
          <i class="el-icon-date"></i>
          <span slot="title">考情情况</span>
        </el-menu-item>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>密码管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">修改密码</el-menu-item>
            <el-menu-item index="5-2">忘记密码</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "sidebar",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
.el-menu{
  height: 898px;
}
</style>
